<template>
  <div class="icon-container">
      <div
        :class="{ 'icon-tool': true, active: item.flag }"
        @mouseenter="handleMouseEnter(item)"
        @mouseleave="handleMouseLeave(item)"
        v-for="item in measTools"
        :key="item.id"
      >
        <div class="svg-container">
          <el-badge
            is-dot
            :hidden="item.addType==='del'?false:true"
            :badge-style="{ border: 'none' }"
            :offset="[7, 8]"
            color="#67c23a"
          >
            <svg-icon
              :color="item.flag ? '#4a8eff' : ''"
              :iconClass="item.icon"
              class="svg-w-h"
            />
          </el-badge>
        
        </div>
        <span v-if="!item.flag" class="tool-title">{{ item.name }}</span>
        <div class="add-help-btn" v-if="item.flag">
          <span class="add" @click="handleAddDel(item)">{{
            item.addType === "add" ? "添加" : "移除"
          }}</span>
          <el-tooltip
           popper-class="custom-tooltip"
            effect="light"
            :content="item.helpTip"
            placement="right"
          >
            <span class="help">帮助</span>
          </el-tooltip>
        </div>
      </div>
    </div>
</template>

<script setup name="ToolCard">
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
  measTools: {
    type: Array,
    required: true,
  },
});



// 鼠标移入事件，设置当前 item 的 flag 为 true
const handleMouseEnter = (item) => {
  item.flag = true;
};

// 鼠标移出事件，设置当前 item 的 flag 为 false
const handleMouseLeave = (item) => {
  item.flag = false;
};
const handleAddDel = (item) => {
  item.addType = item.addType === "del" ? "add" : "del";
};
</script>

<style lang="scss" scoped>
::v-deep .custom-tooltip {
  color: #fff;
  font-size: 12px;
  padding: 10px;
  border-radius: 4px;
  width: 50px !important;
  white-space: nowrap;

}
.icon-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 创建三列，每列均分 */
    gap: 20px; /* 列之间的间距 */
    margin-top: 15px;
    .active {
      outline: 1px solid #006197;
      border-radius: 4px;
      background: rgba(101, 162, 255, 0.1);
    }
    .icon-tool {
      display: flex;
      margin-top: 10px;
      flex-direction: column;
      align-items: center;
      width: 68px;
      height: 68px;
      cursor: pointer;
      color: #fff;
      text-align: center;
      .svg-container {
        width: 100%;
        height: 40px;
        line-height: 50px;
      }
      .tool-title {
        width: 68px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .svg-w-h {
        width: 24px;
        height: 24px;
      }
      .add-help-btn {
        display: flex;
        height: 28px;
        justify-content: space-evenly;
        align-items: center;
        border-top: 1px solid #006197;
        width: 100%;
        font-size: 10px;
        .add,
        .help {
          cursor: pointer;
          &:hover {
            color: #016eab;
          }
        }
        .help {
        }
      }
    }
  }
</style>
